<script>
/* 去除Chrome字体最小12px的最终解决方案
 * 文字按钮：
 * 常用的按钮样式，默认带边框
 * 默认使用圆角，固定圆角为0.2vw
 * 预设颜色：Blue（默认），Red，Green，Yellow，Orange，Black，Pink
 * 没有高度，默认两倍字体高度
 * 默认字体大小为0.65vw，在1920宽度下，大约等于12px
 * 在SessionStorage置入一个名为OpenDebug的key，值为true，即可开启全局Debug
 */

export default {
  // 控制组件用的参数
  props: {
    Text: null, // 按钮内显示的文字
    Color: null, // 鼠标悬浮时文字的颜色，支持16进制，不支持透明
    Size: null, // 按钮内文字大小
    Disable: null, // 是否禁用按钮，false以外的值一律为启用
    Radius: null, // 是否使用圆角，false以外的值一律为启用
    Excess: null, // 是否启用按钮的过度效果，false以外的值一律为启用
    Msg: null, // 这是个用户自定义参数，触发按钮点击事件时会返回此参数
    DeBug: null, // 调试模式，true以外的值一律为禁用
    DeBugId: null // 调试模式ID，可有可无
  },

  // 主要变量
  data: () => ({
    TEXT: "", // 按钮内显示的文字
    COLORA: "Base3486E67B6753E98F", // 鼠标悬浮时文字和边的颜色
    COLORS: ["Blue", "Red", "Green", "Yellow", "Orange", "Black", "Pink"], // 预设名称
    COLORL: "", // 用来存储用户定制的颜色
    SIZE: 0, // 默认的按钮文字大小
    WIDTH: 0, // 按钮的宽度，由JS计算获得
    EXCESS: "ExcessClose3486E67B6753E98F", // 控制按钮的过度动画
    TERM: new RegExp(/^#([0-9a-fA-F]{6})$/) // 颜色匹配正则
  }),

  // 渲染前执行
  created() {
    this.TEXT = this.Text || "默认文字"; // 获取文字
    this.SIZE = this.Size || 0.65; // 获取文字大小，默认0.65vw
  },

  // 渲染后执行
  mounted() {
    let W = document.body.clientWidth / 100; // 获取当前窗口1vw等于多少px
    let C = this.$refs.KL.offsetWidth / 10; // 获取被渲染后的button宽度（px单位）
    this.WIDTH = C / W; // 将px单位转换成vw单位

    var that = this; // 作用域切换

    // 延迟判断用户是否需要使用过度动画
    window.setTimeout(() => {
      that.EXCESS =
        that.Excess == false
          ? "ExcessClose3486E67B6753E98F"
          : "ExcessOpen3486E67B6753E98F";

      that.BugLog(); // 顺手调用以下日志输出
    });
  },

  methods: {
    // 鼠标悬停时触发
    Enter() {
      if (this.COLORS.indexOf(this.Color) > -1) {
        // 用户使用了预设颜色
        this.COLORA = this.Color + "3486E67B6753E98F";
      } else if (this.TERM.test(this.Color)) {
        // 用户定制了颜色
        this.COLORA = "";
        this.COLORL = this.Color;
      } else {
        // 用户什么也没做
        this.COLORA = "Blue3486E67B6753E98F";
      }
    },

    // 鼠标离开时触发
    Leave() {
      this.COLORL = "";
      this.COLORA = "Base3486E67B6753E98F";
    },

    // 处理按钮的点击事件
    Click() {
      this.BugLogEasy("点击");
      this.$emit("Click", this.Msg);
    },

    // 事件触发
    BugLogEasy(E) {
      if (
        this.DeBug == true ||
        window.sessionStorage.getItem("OpenDebug") == "true"
      ) {
        console.group(
          `按钮${E}事件${
            this.DeBugId != undefined ? "（ID:" + this.DeBugId + ")" : ""
          }`
        );

        console.log(`用户参数：${this.Msg ? "\n" + this.Msg : "无"}`);

        console.groupEnd();
      }
    },

    // 汇报bug
    BugLog() {
      if (
        this.DeBug == true ||
        window.sessionStorage.getItem("OpenDebug") == "true"
      ) {
        console.group(
          `来自按钮的日志：${
            this.DeBugId != undefined ? "（ID:" + this.DeBugId + ")" : ""
          }`
        );

        console.table([
          { Name: "Text", Value: this.Text, Remark: "按钮内显示的文字" },
          {
            Name: "Color",
            Value: this.Color,
            Remark: "鼠标悬浮时文字和边的颜色"
          },
          {
            Name: "Size",
            Value:
              this.Size == undefined ? "默认值（0.65vw）" : this.Size + "vw",
            Remark: "按钮内文字大小"
          },
          {
            Name: "Disable",
            Value: this.Disable == false ? "禁用" : "启用",
            Remark: "是否禁用按钮"
          },
          {
            Name: "Radius",
            Value: this.Radius == false ? "禁用" : "启用",
            Remark: "是否使用圆角"
          },
          {
            Name: "Excess",
            Value: this.Excess == false ? "禁用" : "启用",
            Remark: "Excess"
          }
        ]);

        console.log(`用户参数：${this.Msg ? "\n" + this.Msg : "无"}`);

        console.groupEnd();
      }
    }
  }
};
</script>

<template>
  <div
    class="Basis3486E67B6753E98F"
    :class="[{Radius3486E67B6753E98F:Radius!=false},COLORA,EXCESS]"
    :style="{fontSize:SIZE+'vw',height:SIZE+'vw',width:WIDTH+'vw'}"
    @mouseenter="Enter"
    @mouseleave="Leave"
    @click="Click"
  >
    <button
      class="Enlarge3486E67B6753E98F"
      :class="[COLORA,EXCESS]"
      :style="{fontSize:SIZE*10+'vw',color:COLORL}"
      ref="KL"
    >{{TEXT}}</button>
  </div>
</template>

<style scoped>
.Basis3486E67B6753E98F {
  /* 按钮的基础样式 */
  background-color: #ffffff;
  display: inline-block;
  border: none;
  overflow: hidden;
  line-height: 1;
}

.ExcessOpen3486E67B6753E98F {
  transition: all 0.5s ease !important;
}

.ExcessClose3486E67B6753E98F {
  transition: none !important;
}

.Radius3486E67B6753E98F {
  border-radius: 0.2vw;
}

.Enlarge3486E67B6753E98F {
  /* 强行把按钮内文字部分缩小10倍 */
  transform: translate(-50%, -50%) scale(0.1);
  top: 50%;
  left: 50%;
  float: left;
  border: none;
  line-height: 1;
  position: relative;
  white-space: nowrap;
  background-color: transparent;
}

.Base3486E67B6753E98F {
  color: #888888;
}

.Blue3486E67B6753E98F {
  color: #409eff;
}

.Red3486E67B6753E98F {
  color: #ff3e3e;
}

.Green3486E67B6753E98F {
  color: #00d812;
}

.Yellow3486E67B6753E98F {
  color: #eeff00;
}

.Orange3486E67B6753E98F {
  color: #ffa600;
}

.Black3486E67B6753E98F {
  color: #333333;
}

.Pink3486E67B6753E98F {
  color: #f7a3ff;
}
</style>